<template>
	<u-popup :show="visible" :round="10" mode="bottom" closeOnClickOverlay="true" @close="visible=false">
		<view class="popup">
			<view class="tip">
				 <text>{{title}}</text>
			</view>
			<view style="margin-top:30rpx;">
				<view class="flex" v-if="money>-1"
				style="justify-content: space-around;padding: 20rpx;">
					<view style="font-weight: 600;font-size: 28rpx;color: #333333;"> 扣除费用：</view>
					<view style="font-weight: 600;font-size: 28rpx;color: #277EEF;">
						¥{{money}}
					</view>
				</view>
				<scroll-view class="scroll" scroll-y>
					<u-checkbox-group v-model="checked" iconPlacement="right" placement="column">
						
						<u-checkbox activeColor="#277EEF" :label="item.label" :name="item.label"
						:customStyle="{
							marginBottom: '20rpx',backgroundColor: '#F8F8F8',padding:'20rpx',borderRadius:'10rpx'
						}"
						v-for="(item,index) in reasonList" :key="index"></u-checkbox>
						 
					</u-checkbox-group>  
				</scroll-view>
			</view>
			
			<view class="woodsbtn" style="width: 90%;margin: 20rpx auto;" @click="handleChange">
				确认取消
			</view>
		</view>
		</u-popup> 
	 
</template>

<script>
	import { getDictDataAPI} from "@/api/api.js"
	export default {
		name:"woods-popupModal",
		props: {
			 title:{
				 type:String,
				 default:"退款原因"
			 },
			 dict:{
				 type:String,
				 default:""
			 }
		},
		 
		data() {
			return {
				visible:false,
				money:-1, 
				checked:[],
				reasonList :[]
			};
		},
		watch:{
			visible(val){
				if(!val){
					this.money=-1
				}
			}
		} ,
		created() {
			this.getdata()
		},
		methods:{
			 
			getdata(){
				getDictDataAPI(this.dict).then(res=>{
					this.reasonList=res
				})
			} ,
			/*
			@description 回调事件
			*/ 
			handleChange(){
				if(this.checked.length){
					this.visible=false
					this.$emit("handleChange",this.checked,this.money)
				}else{
					uni.showToast({
						title:'请选择原因',
						icon:'none'
					})
				}
				 
			}
		}
	}
</script>

<style scoped lang="scss">
 
.popup {
    padding: 40rpx; 
	.tip{
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width: 30rpx;
			margin-right: 10rpx;
		}
		text{
			font-weight: bold;
			font-size: 38rpx;
			color: #333333;
		}
	}
	.scroll{
		width: 100%;
		height: 600rpx;
		padding-bottom: 30rpx;
		/* background-color: red; */
	} 
}
 
</style>